<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{width: 100px;height: 100px;background: black;position: absolute;}
#div2{width: 100px;height: 100px;background: red;position: absolute;left: 300px;top: 200px;}

    </style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<script type="text/javascript">
	
	div1.onmousedown = function(e){
		var ev = e || event;
		var l = ev.clientX - this.offsetLeft;
		var t = ev.clientY - this.offsetTop;

		document.onmousemove = function(e){
			var ev = e || event;
			var div1R = div1.offsetLeft + div1.offsetWidth;
			var div2B = div2.offsetTop+div2.offsetHeight;
			var div2R = div2.offsetWidth + div2.offsetLeft;
			var div1B = div1.offsetTop + div1.offsetHeight;

			if(div1R > div2.offsetLeft && div1.offsetTop < div2B && div1.offsetLeft < div2R && div1B > div2.offsetTop){
				div2.style.background = 'green'
			} 
			else{
				div2.style.background = 'red'
			}

			div1.style.left = ev.clientX - l + 'px';
			div1.style.top = ev.clientY - t + 'px';
		}
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
		}

	}


</script>
</body>
</html>